

class Enlarge {
    constructor(mask, small_box, tab, big_box,product_box) {
        this.oMask = mask;
        this.oSmallBox = small_box;
        this.oBigBox = big_box;
        this.Tab = tab;
        this.oproductBox=product_box;

        this.index = 0;
        this.eventBind();
    }
    mouseover() {
        let that = this;
        this.oSmallBox.onmouseover = function () {
            that.oBigBox.style.display = "block";
            that.oMask.style.display = "block";
        }
    }
    mouseout() {
        let that = this;
        this.oSmallBox.onmouseout = function () {
            that.oBigBox.style.display = "none";
            that.oMask.style.display = "none"
        }
    }
    // 切换图片
    oCilck() {
        let that = this;
        for (let i = 0; i < Tab.children.length; i++) {
            Tab.children[i].onclick = function () {
                oSmallBox.style.backgroundImage = `url(../detailimg/bx${i}.jpg)`;
                oBigBox.style.backgroundImage = `url(../detailimg/bx${i}.jpg)`;
            }
        }
    }
    // 鼠标划过d
    mousemove() {
        let that = this;
        this.oSmallBox.onmousemove = function (evt) {
            let e = evt || event;
            let left = e.pageX - that.oSmallBox.offsetLeft - that.oMask.offsetWidth / 2 - that.oproductBox.offsetLeft;
            let top = e.pageY - that.oSmallBox.offsetTop - that.oMask.offsetHeight / 2 - that.oproductBox.offsetTop;
            if (left < 0) {
                left = 0;
            }
            let maxLeft = that.oSmallBox.offsetWidth - that.oMask.offsetLeft;
            if (left > maxLeft) {
                left = maxLeft;
            }
            if (top <0) {
                top=0;
            }
            let maxTop=that.oSmallBox.offsetHeight - that.oMask.offsetTop;
            if (top > maxTop) {
                top=maxTop;
            }
            let x=that.oBigBox.offsetWidth * left /that.oMask.offsetWidth;
            let y =that.oBigBox.offsetWidth * top /that.oMask.offsetWidth;

            that.oBigBox.style.backgroundPositionX= -x+ "px"
            that.oBigBox.style.backgroundPositionY = -y + "px";



            that.oMask.style.left = left + "px";
            that.oMask.style.top = top + "px";
        }
    }

    eventBind() {
        this.mouseover()
        this.mouseout()
        this.mousemove()
        this.oCilck()
    }
}
